import React from 'react';
import { Modal, Card, Typography, Divider } from 'antd';
import { useAuth } from '../contexts/AuthContext';

const { Title, Text } = Typography;

interface UserProfileModalProps {
  visible: boolean;
  onClose: () => void;
}

const UserProfileModal: React.FC<UserProfileModalProps> = ({ visible, onClose }) => {
  const { authUser } = useAuth();

  if (!authUser) {
    return null;
  }

  return (
    <Modal
      title="个人信息"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={400}
    >
      <Card variant={ "borderless" }>
        <div style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            <div 
              style={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                backgroundColor: '#1890ff',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 20,
                marginRight: 12
              }}
            >
              {authUser?.userName ? authUser.userName.charAt(0).toUpperCase() : 'U'}
            </div>
            <Title level={5} style={{ margin: 0 }}>{authUser.nickName || authUser.userName}</Title>
          </div>
          <Text type="secondary">用户名: {authUser.userName}</Text>
        </div>

        <Divider />

        <div style={{ marginBottom: 16 }}>
          <Text strong>角色：</Text>
          <Text>{authUser.roles?.join(', ') || '普通用户'}</Text>
        </div>

        <div style={{ marginBottom: 16 }}>
          <Text strong>昵称：</Text>
          <Text>{authUser.nickName || '未设置'}</Text>
        </div>
      </Card>
    </Modal>
  );
};

export default UserProfileModal;